<template>
  <view class="page-bc">
    <view class="page-container">
      <view class="form-card">
        <view class="title">球员认证</view>
        <view class="form-con">
          <view class="form-item">
            <view class="form-label label-width1"> 姓名 </view>
            <input
              class="form-value form-input input-width1"
              v-model="certfiForm.name"
            />
          </view>
          <view class="form-item">
            <view class="form-label label-width1"> 身份证 </view>
            <input class="form-value form-input" v-model="certfiForm.certNo" />
          </view>
          <view class="form-item">
            <view class="form-label label-width1"> 手机号 </view>
            <input
              class="form-value form-input input-width1"
              type="tel"
              v-model="certfiForm.phone"
            />
          </view>
          <view class="form-row">
            <view class="form-col">
              <view class="form-item">
                <view class="form-label label-width1"> 身高 </view>
                <input
                  class="form-value form-input"
                  type="number"
                  v-model="certfiForm.height"
                />
              </view>
            </view>
            <view class="form-col">
              <view class="form-item">
                <view class="form-label label-width2"> 上衣尺码 </view>
                <selector
                  class="form-value"
                  v-model="certfiForm.upSize"
                  :list="sizeList"
                ></selector>
              </view>
            </view>
          </view>
          <view class="form-row">
            <view class="form-col">
              <view class="form-item">
                <view class="form-label label-width1"> 体重 </view>
                <input
                  class="form-value form-input input-width2"
                  type="number"
                  v-model="certfiForm.weight"
                />
              </view>
            </view>
            <view class="form-col">
              <view class="form-item">
                <view class="form-label label-width2"> 下衣尺码 </view>
                <selector
                  class="form-value"
                  v-model="certfiForm.downSize"
                  :list="sizeList"
                ></selector>
              </view>
            </view>
          </view>
          <view class="form-item">
            <accept-box color="black" v-model="isEntered"
              >{{ isEnterText }}</accept-box
            >
          </view>
        </view>
      </view>
      <view class="protocol-box">
        <view class="protocol-item">
          <accept-box v-model="agree1"
            >我承诺提交报名信息属实并承担一切后果</accept-box
          >
        </view>
        <view class="protocol-item">
          <accept-box v-model="agree2"
            >已阅读并同意《免责协议》《赛事规范》</accept-box
          >
        </view>
        <view class="protocol-item">
          <accept-box v-model="agree3"
            >我同意加入adiClub会员，我已阅读并同意adiClub会员规则和隐私声明</accept-box
          >
        </view>
      </view>
      <image
        class="img-btn"
        src="https://web.skyelook.com/kf/adidas/miniprogram/球队认证/提交@2x.png"
        mode="widthFix"
        @click="triggerSubmit"
      ></image>
    </view>
  </view>
</template>

<script>
import { validation } from '../../utils/validation';
import acceptBox from '../components/acceptBox';
import selector from '../components/selector';
export default {
  components: {
    acceptBox,
    selector,
  },
  created() {},
  mounted() {},
  data() {
    return {
      isEntered: '',
      isEnterText:'2022年12月31日后是否参加过职业比赛',
      agree1: '0',
      agree2: '0',
      agree3: '0',
      certfiForm: {
        name: '',
        certNo: '',
        phone: '',
        height: '',
        upSize: '',
        weight: '',
        downSize: '',
      },
      sizeList: ['S', 'M', 'L', 'XL', 'XXL', '3XL', '4XL'],
    };
  },
  methods: {
    // 球队集结
    triggerSubmit() {
      const veriRes = validation([
        {
          rule: 'CUSTNAME',
          value: this.certfiForm.name,
        },
        {
          rule: 'IDNUM',
          value: this.certfiForm.certNo,
        },
        {
          rule: 'EMPTY',
          value: this.certfiForm.height,
          tip: '请输入身高',
        },
        {
          rule: 'EMPTY',
          value: this.certfiForm.upSize,
          tip: '请选择上衣尺寸',
        },
        {
          rule: 'EMPTY',
          value: this.certfiForm.weight,
          tip: '请输入体重',
        },
        {
          rule: 'EMPTY',
          value: this.certfiForm.downSize,
          tip: '请选择下衣尺寸',
        },
      ]);
      if (!veriRes.flag) {
        uni.showToast({
          title: veriRes.tip,
          icon: 'none',
          duration: 2000,
        });
        return;
      }
      if(!this.agree1){
        uni.showToast({
          title: '请先承诺提交报名信息属实并承担一切后果',
          icon: 'none',
          duration: 2000,
        });
        return;
      }
      if(!this.agree2){
        uni.showToast({
          title: '请先阅读并同意《免责协议》《赛事规范》',
          icon: 'none',
          duration: 2000,
        });
        return;
      }
      if(!this.agree3){
        uni.showToast({
          title: '请先同意加入adiClub会员，阅读并同意adiClub会员规则和隐私声明',
          icon: 'none',
          duration: 2000,
        });
        return;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.page-bc {
  background-image: url('https://web.skyelook.com/kf/adidas/miniprogram/球队认证/form-bg.png');
  align-items: center;
  overflow: auto;
}
.form-card {
  width: 100%;
  margin-top: 170rpx;
  padding: 180rpx 40rpx 220rpx;
  background-image: url('https://web.skyelook.com/kf/adidas/miniprogram/球队认证/组 8@2x.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  font-family: 'SourceHanSansCN-Bold', 'SimHei', '黑体', sans-serif;
  font-weight: bold;
  color: #000;
  align-items: center;
  & > .title {
    font-size: 54rpx;
    text-align: center;
  }
}
.form-con {
  width: 64vw;
}
.form-item {
  font-size: 24rpx;
  flex-direction: row;
  align-items: center;
  margin-top: 40rpx;
}
.form-label {
  text-align-last: justify;
  position: relative;
  padding-right: 40rpx;
  flex-shrink: 0;
  &::after {
    content: ':';
    display: inline-block;
    position: absolute;
    right: 25rpx;
    bottom: 3rpx;
  }
}
.form-value {
  flex-grow: 1;
}
.label-width1 {
  width: 120rpx;
}
.label-width2 {
  width: 148rpx;
}
.form-input {
  background-image: url('https://web.skyelook.com/kf/adidas/miniprogram/球队认证/矩形 3 拷贝 4@2x.png');
  padding: 10rpx;
}
.input-width1 {
  width: 120rpx;
}
.input-width2 {
  width: 60rpx;
}
.form-row {
  display: block;
}
.form-col {
  display: inline-block;
  box-sizing: border-box;
  &:first-child {
    width: 42%;
  }
  &:nth-child(2) {
    width: 58%;
    padding-left: 20rpx;
  }
}
.protocol-box {
  align-items: center;
}
.protocol-item {
  width: 70vw;
}
.img-btn {
  margin: 60rpx 0;
}
</style>
